<template>
  <motion.div
    class="product-node-container"
    :initial="{ scale: 0, x: -size.width / 2, y: -size.height / 2 }"
    :animate="{ scale: 1, rotate: rotate }"
    :transition="{ duration: 0 }"
    :style="{
      ...productStyle
    }"
  >
    <template v-if="processStatus === 'processing'">
      <div class="loading">
        <svg-icon name="nodeLoading" color="#0087dc"></svg-icon>
      </div>
    </template>
  </motion.div>
</template>

<script setup lang="ts">
import { motion } from 'motion-v'
import { inject, onMounted, ref } from 'vue'
import { Node } from '@antv/x6'

const nodeMsg = inject('getNode') as any
const node = ref<Node | null>(null)
const size = { width: 20, height: 20 }
onMounted(() => {
  initNode()
})

//加工状态
const processStatus = ref('')

const productStyle = ref({
  backgroundColor: '#ffbbbbb0',
  borderRadius: 0,
  borderWidth: 1,
  borderColor: '#b81e1eb6'
})

//旋转角度
const rotate = ref(0)

//初始化节点的数据
const initNode = (): void => {
  if (node.value === null) {
    node.value = nodeMsg() as Node
    productStyle.value = node.value?.getData()?.style

    processStatus.value = node.value?.getData()?.status
    size.width = node.value?.getSize()?.width as number
    size.height = node.value?.getSize()?.height as number

    node.value.on('change:data', () => {
      processStatus.value = node.value?.getData()?.status
      rotate.value = node.value?.getData()?.angle
    })
  }
}
</script>

<style scoped lang="scss">
.product-node-container {
  width: 100%;
  height: 100%;
  border: 1px solid #b81e1eb6;
  background-color: #ffbbbbb0;
  display: flex;
  justify-content: center;
  align-items: center;

  .loading {
    animation: a1 3s infinite linear;
  }

  @keyframes a1 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
